<template>
    <view class="pagination">
      <view style="display: flex; width: 100%">
        <view class="item" @click="first">首页</view>
        <view class="item" :class="{ disabled: data.current_page === 1 }" @click="previousPage"
          >上一页</view
        >
        <view class="item" style="color: black; flex-grow: 2"
          >{{ data.current_page }}/{{ data.last_page }}({{ data.total }})</view
        >
        <view
          class="item"
          :class="{ disabled: data.current_page === data.last_page }"
          @click="nextPage"
          >下一页</view
        >
        <view class="item" @click="last">尾页</view>
      </view>
    </view>
  </template>
  
  <script setup>
    import { toRefs } from 'vue'
  
    const props = defineProps({
      data: {
        type: Object,
        default: () => {}
      }
    })
    const { data } = toRefs(props)
  
    const emits = defineEmits(['page'])
  
    // 下一页
    const nextPage = () => {
      if (data.value.current_page === data.value.last_page) {
        return
      }
      emits('page', ++data.value.current_page)
    }
  
    // 上一页
    const previousPage = () => {
      if (data.value.current_page === 1) {
        return
      }
      emits('page', --data.value.current_page)
    }
  
    // 首页
    const first = () => {
      emits('page', 1)
    }
  
    // 末尾
    const last = () => {
      emits('page', data.value.last_page)
    }
  </script>
  
  <style lang="scss" scoped>
    .pagination {
      background-color: white;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      // position: fixed;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80rpx;
      box-sizing: border-box;
      .item {
        color: #007aff;
        position: relative;
        font-size: 24rpx;
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        box-sizing: border-box;
        &::after {
          position: absolute;
          box-sizing: border-box;
          content: ' ';
          pointer-events: none;
          top: -50%;
          right: -50%;
          bottom: -50%;
          left: -50%;
          border: 0 solid #ebedf0;
          border-width: 1px;
          transform: scale(0.5);
        }
      }
      .disabled {
        color: #646566;
        background-color: #f7f8fa;
        opacity: 0.5;
      }
    }
    .uv-button-wrapper {
      flex: 1;
      border-right: none;
    }
  </style>
  